

<template>

    
    <div style="margin:0 auto;width: 80%" >
        <Form ref="post" :model="post" :rules="postRules" label-position="left" :label-width="100">
            <Form-Item label="标题:" prop="title">
                <Input v-model="post.title" placeholder="请输入标题"  />
            </Form-Item>
            <Form-Item label="内容:" prop="content">
                <MyEditor ref='myEditor' v-model="post.content"> </MyEditor>
            </Form-Item>

        </Form>
        <br><br>
        <div style="text-align:center"><i-button @click="submit_save_post('post')" type="primary">保存</i-button></div>
       
    </div>
</template>

<script>

import { blog_add } from  '@/api'
import * as httpRequest from '@/api/http'

import MyEditor from '@/lib/editor/myEditor';
export default {
    components:{
        MyEditor
    },
    data() {
        return {
            post:{
                title: null,
                content: null,
            },
            postRules: {
                title:[
                    {required: true,message:"请输入标题",trigger: 'blur'},
                ],
            },

        }
    },

    methods: {
        submit_save_post(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) {
                    validate = true
                } else {
                    this.$Message.error('表单数据验证失败!');
                    validate = false
                }
            })
            if(!validate) return
            let data = {"title":this.post.title,"content":this.post.content}
            httpRequest.post(blog_add,data,{},2000).then( (response) => {
                let info = JSON.stringify(response.data)
                // token 刚好有ok的字符串
                if(info.indexOf('fail') == -1) {
                    this.$Message.success('添加文章成功')
                    this.$router.push({name:'postList'})
                }else {
                    this.$Message.error(info)
                }
            })
        },
    },
    mounted: function() {
    }
}
</script>
<style scoped>

</style>